<template>
  <div class="menu">
    <el-button @click="show=true" size="small">编辑选项</el-button>
    <el-dialog title="编辑选项" width="1200px" :visible.sync="show" custom-class="modal" append-to-body>
      <el-row>
        <el-col :span="6">
          <div class="title">第一级</div>
          <div
            class="item"
            :class="num==level1.i?' active':''"
            @click="set_current(2, num)"
            v-for="(option, num) in level1.attrs"
            :key="num"
          >
            <el-row :gutter="16">
              <el-col :span="20">
                <el-input v-model="option.value" size="small"/>
              </el-col>
              <el-col :span="4" class="remove">
                <el-button @click="remove(1, num)" circle icon="el-icon-close" size="small"></el-button>
              </el-col>
            </el-row>
          </div>
          <div class="item">
            <el-button @click="add_item(1)" style="width: 100%;" size="small">添加选项+</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="title">第二级</div>
          <div
            class="item"
            :class="num==level2.i?' active':''"
            @click="set_current(3, num)"
            v-for="(option, num) in level2.attrs"
            :key="num"
          >
            <el-row :gutter="16">
              <el-col :span="20">
                <el-input v-model="option.value" size="small" />
              </el-col>
              <el-col :span="4" class="remove">
                <el-button @click="remove(2, num)" circle icon="el-icon-close" size="small"></el-button>
              </el-col>
            </el-row>
          </div>
          <div v-if="level1.attrs&&level1.attrs.length>0" class="item">
            <el-button @click="add_item(2)" style="width: 100%;" size="small">添加选项+</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="title">第三级</div>
          <div
            class="item"
            :class="num==level3.i?' active':''"
            @click="set_current(4, num)"
            v-for="(option, num) in level3.attrs"
            :key="num"
          >
            <el-row :gutter="16">
              <el-col :span="20">
                <el-input v-model="option.value" size="small" />
              </el-col>
              <el-col :span="4" class="remove">
                <el-button @click="remove(3, num)" circle icon="el-icon-close" size="small"></el-button>
              </el-col>
            </el-row>
          </div>
          <div v-if="level2.attrs&&level2.attrs.length" class="item">
            <el-button @click="add_item(3)" style="width: 100%;" size="small">添加选项+</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="title">第四级</div>
          <div class="item" v-for="(option, num) in level4.attrs" :key="num">
            <el-row :gutter="16">
              <el-col :span="20">
                <el-input v-model="option.value" size="small" />
              </el-col>
              <el-col :span="4" class="remove">
                <el-button @click="remove(4, num)" circle icon="el-icon-close" size="small"></el-button>
              </el-col>
            </el-row>
          </div>
          <div v-if="level3.attrs&&level3.attrs.length" class="item">
            <el-button @click="add_item(4)" style="width: 100%;" size="small">添加选项+</el-button>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="show=false" size="small">取消</el-button>
        <el-button type="primary" @click="save" size="small">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      default() {
        return [];
      }
    }
  },
  watch: {
    options(val) {
      this.level1 = { attrs: [], i: 0 };
      this.level2 = { attrs: [], i: 0 };
      this.level3 = { attrs: [], i: 0 };
      this.level4 = { attrs: [], i: 0 };
      this.level1.attrs = [...val];
      this.set_current(2);
    }
  },
  mounted() {
    this.level1.attrs = [...this.options];
    this.set_current(2);
  },
  data() {
    return {
      level1: { attrs: [], i: 0 },
      level2: { attrs: [], i: 0 },
      level3: { attrs: [], i: 0 },
      level4: { attrs: [], i: 0 },
      show: false
    };
  },
  methods: {
    save() {
      this.show = false
      this.$emit("on-save", this.level1.attrs);
    },
    remove(level, index) {
      this["level" + level].attrs.splice(index, 1);
    },
    add_item(level, index) {
      let date = new Date();
      if (level == 1) {
        this["level" + level].attrs.push({
          value: "选项" + (this["level" + level].attrs.length + 1),
          key: "" + date.getDate() + Math.floor(Math.random() * 10000)
        });
      } else {
        let item = this["level" + (level - 1)].attrs[
          this["level" + (level - 1)].i
        ];
        if (!item.children) {
          item.children = [];
        }

        if (!this["level" + level].attrs) {
          this["level" + level].attrs = [];
        }
        let i = this["level" + level].attrs.length + 1;

        item.children.push({
          value: "选项" + i,
          key: "" + date.getDate() + Math.floor(Math.random() * 10000)
        });

        this.set_current(level);
      }
    },
    set_current(level, index) {
      if (index || index == 0) {
        this["level" + (level - 1)].i = index;
      }
      for (let i = level; i <= 4; i++) {
        let item = this["level" + (i - 1)];
        if (i > level) {
          if (item.attrs && item.attrs[0] && item.attrs[0].children) {
            this["level" + i].attrs = item.attrs[0].children;
          } else {
            this["level" + i].attrs = [];
            this["level" + i].i = 0;
          }
        } else {
          if (item.attrs && item.attrs[item.i] && item.attrs[item.i].children) {
            this["level" + level].attrs = item.attrs[item.i].children;
          } else {
            this["level" + level].attrs = [];
          }
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.modal {
  width: 1200px;
  min-height: 800px;
  .item {
    width: 100%;
    padding: 12px;
    border: 1px solid #fff;
    &:hover {
      background: rgb(255, 223, 201);
    }
    &.active {
      background: rgb(255, 223, 201);
    }
    .remove {
      font-size: 18px;
      color: rgb(197, 2, 2);
    }
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 12px;
    background: rgb(223, 95, 11);
    color: #fff;
    border: 1px solid #fff;
  }
}
</style>